<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城-专区页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/base_header_index.css">
    <link rel="stylesheet" href="css/base_footer.css">
    <link rel="stylesheet" href="css/sale.css">
</head>

<body>
    <!-- 顶部菜单栏 -->
    <header>
        <!-- 顶部通栏 -->
        <div class="top">
            <!-- 版心 -->
            <div class="w1200">
                <!-- 左边url -->
                <span class="fl">乐购&emsp;legochina.cn</span>
                <!-- 右边欢迎语 -->
                <div class="welcome fr">欢迎光临乐购&emsp;请<a href="login.html">登陆</a>|<a href="register.html">注册</a>
                </div>
            </div>
        </div>
        <!-- 导航菜单栏 -->
        <div class="w1200 nav rel">
            <!-- logo -->
            <h1 class="logo abs">
                <a href="index.html">乐购</a>
            </h1>
            <!-- 搜索框和购物车按钮 -->
            <div class="search-buy fl">
                <!-- 搜索框 -->
                <div class="search-box fl">
                    <input class="search-cont" type="text" placeholder="请输入搜索的商品名">
                    <button class="search-btn fr"></button>
                </div>
                <!-- 购物车和订单 -->
                <div class="buy fr">
                    <div class="buy-box fl"><a href="cart.html">购物车</a></div>
                    <div class="buy-order fl"><a href="pay.html">我的订单</a></div>
                </div>
            </div>
            <!-- 导航栏 -->
            <nav class="fl">
                <ul class="fl">
                    <li><a href="sale.html">图书</a></li>
                    <li><a href="sale.html">电子书</a></li>
                    <li><a href="sale.html">原创文学</a></li>
                    <li><a href="sale.html">服装</a></li>
                    <li><a href="sale.html">户外运动</a></li>
                    <li><a href="sale.html">孕婴童</a></li>
                    <li><a href="sale.html">家居</a></li>
                    <li><a href="sale.html">创意文具</a></li>
                    <li><a href="sale.html">地方特产</a></li>
                    <li><a href="sale.html">海外购</a></li>
                    <li><a href="sale.html">电器城</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- 横幅栏 -->
    <div class="banner">
        <div class="w1200 rel">
            <div class="banner-inf abs">
                <h2>潮流新区</h2>
                <dl class="clearfix">
                    <dt>大家都在穿</dt>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                </dl>
                <dl class="clearfix">
                    <dt>大家都在穿</dt>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                </dl>
                <dl class="clearfix">
                    <dt>大家都在穿</dt>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                    <dd>当季新品</dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- 主体内容 -->
    <main class="w1200">
        <!-- 推荐内容 -->
        <div class="recommend">
            <div class="recommend-special">
                <div class="special1 fl">
                    <h3>品牌闪购</h3>
                    <div>
                        <img src="images/sale/sale_special1.jpg">
                    </div>
                </div>
                <div class="special2 fl">
                    <h3>聚名品</h3>
                    <div>
                        <img src="images/sale/sale_special2.jpg">
                    </div>
                </div>
                <div class="special2 fl">
                    <h3>品牌活动</h3>
                    <div>
                        <img src="images/sale/sale_special3.jpg">
                    </div>
                </div>
            </div>
            <div class="recommend-ad">
                <div>
                    <img src="images/sale/sale_rad1.jpg">
                </div>
                <div>
                    <img src="images/sale/sale_rad2.jpg">
                </div>
                <div>
                    <img src="images/sale/sale_rad3.jpg">
                </div>
                <div>
                    <img src="images/sale/sale_rad4.jpg">
                </div>
            </div>
        </div>
        <!-- 女装热销 -->
        <div class="woman">
            <!-- 标题 -->
            <div class="titles">
                <img src="images/sale/sale_titlesl.png">
                <h2>女装热销</h2>
                <img src="images/sale/sale_titlesr.png">
                <h3>Ladies Fashion Hot Sell</h3>
            </div>
            <div class="cloth-show">
                <!-- 左边栏 -->
                <div class="show-picl fl">
                    <img src="images/sale/sale_show1.jpg">
                    <div>
                        <div class="show-pla">口红</div>
                        <div class="show-pla">女装</div>
                        <div class="show-pla">女包</div>
                        <div class="show-pla">卸妆</div>
                    </div>
                </div>
                <!-- 中间栏 -->
                <div class="show-picm fl">
                    <div class="show-picm1">
                        <img src="images/sale/sale_show2.jpg">
                    </div>
                    <div class="show-picm2">
                        <h2>ONLY2019秋冬新款弹力女裤</h2>
                        <div>
                            <span>秋装上新款</span>
                            <h3>￥179</h3>
                            <h4><del>￥230.00</del></h4>
                        </div>
                        <img src="images/sale/sale_show3.jpg">
                    </div>
                    <div class="show-picm2 ">
                        <h2>ONLY2019秋冬新款弹力女裤</h2>
                        <div>
                            <span>秋装上新款</span>
                            <h3>￥179</h3>
                            <h4><del>￥230.00</del></h4>
                        </div>
                        <img src="images/sale/sale_show4.jpg">
                    </div>
                    <div class="show-picm1">
                        <img src="images/sale/sale_show5.jpg">
                    </div>
                </div>
                <!-- 右边栏 -->
                <div class="show-picr fr">
                    <h2>女装销量</h2>
                    <div class="show-top show-top1">
                        <dl>
                            <dt>top1</dt>
                            <dd class="clearfix contOn">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top1.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套女19秋季新款短外套女</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top2</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top1.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套女19秋季新款短外套女</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top3</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top1.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套女19秋季新款短外套女</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top4</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top1.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套女19秋季新款短外套女</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top5</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top1.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套女19秋季新款短外套女</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top6</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top1.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套女19秋季新款短外套女</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <!-- 男装热销 -->
        <div class="woman">
            <!-- 标题 -->
            <div class="titles">
                <img src="images/sale/sale_titlesl.png">
                <h2>男装热销</h2>
                <img src="images/sale/sale_titlesr.png">
                <h3>Men Fashion Hot Sell</h3>
            </div>
            <div class="cloth-show">
                <!-- 左边栏 -->
                <div class="show-picl fl">
                    <img src="images/sale/sale_show6.jpg">
                    <div>
                        <div class="show-pla">男衣</div>
                        <div class="show-pla">男裤</div>
                        <div class="show-pla">男包</div>
                        <div class="show-pla">男妆</div>
                    </div>
                </div>
                <!-- 中间栏 -->
                <div class="show-picm fl">
                    <div class="show-picm1">
                        <img src="images/sale/sale_show7.jpg">
                    </div>
                    <div class="show-picm2">
                        <h2>WDNM2021秋冬新款弹力男裤</h2>
                        <div>
                            <span>秋装上新款</span>
                            <h3>￥288</h3>
                            <h4><del>￥330.00</del></h4>
                        </div>
                        <img src="images/sale/sale_show8.jpg">
                    </div>
                    <div class="show-picm2 ">
                        <h2>ONLY2019秋冬新款弹力男装</h2>
                        <div>
                            <span>秋装上新款</span>
                            <h3>￥179</h3>
                            <h4><del>￥230.00</del></h4>
                        </div>
                        <img src="images/sale/sale_show9.jpg">
                    </div>
                    <div class="show-picm1">
                        <img src="images/sale/sale_show10.jpg">
                    </div>
                </div>
                <!-- 右边栏 -->
                <div class="show-picr fr">
                    <h2>男装销量</h2>
                    <div class="show-top show-top2">
                        <dl>
                            <dt>top1</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top7.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套19秋季新款短外套</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top2</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top7.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套19秋季新款短外套</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top3</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top7.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套19秋季新款短外套</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top4</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top7.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套19秋季新款短外套</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top5</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top7.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套19秋季新款短外套</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                            <dt>top6</dt>
                            <dd class="clearfix">
                                <div class="show-top-pic">
                                    <img src="images/sale/sale_top7.jpg">
                                </div>
                                <div class="show-top-price">
                                    <a>乐町牛仔外套19秋季新款短外套</a><br>
                                    <span>￥200</span>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <!-- 品牌专区 -->
        <div class="brand">
            <!-- 标题 -->
            <div class="titles">
                <img src="images/sale/sale_titlesl.png">
                <h2>品牌专区</h2>
                <img src="images/sale/sale_titlesr.png">
                <h3>Brand Fashion Hot Sell</h3>
            </div>
            <div class="brand-show">
                <!-- 上栏 -->
                <div class="brand-up">
                    <div class="brand-up-pic fl">
                        <img src="images/sale/sale_brand1.jpg">
                    </div>
                    <p class="fr">
                        <span>XXX品牌</span><br>
                        HLA JEANS更注重与年青一代的情感沟通，提出“不普通的普通人”的品牌主张，鼓励年轻群体在生活之中坚持小自我，在平凡之中展现小个性，在平淡之中发现小乐趣，活出自己的与众小不同。<br>
                        <a href="product.html">品牌特卖中》》</a>
                    </p>
                </div>
                <!-- 下栏 -->
                <div class="brand-down clearfix">
                    <div class="brand-down-pic">
                        <img src="images/sale/sale_brand2.jpg">
                        <h3>GOLD SHARK</h3>
                        <p>品质男装 秋季焕新</p>
                    </div>
                    <div class="brand-down-pic">
                        <img src="images/sale/sale_brand2.jpg">
                        <h3>GOLD SHARK</h3>
                        <p>品质男装 秋季焕新</p>
                    </div>
                    <div class="brand-down-pic">
                        <img src="images/sale/sale_brand2.jpg">
                        <h3>GOLD SHARK</h3>
                        <p>品质男装 秋季焕新</p>
                    </div>
                    <div class="brand-down-pic">
                        <img src="images/sale/sale_brand2.jpg">
                        <h3>GOLD SHARK</h3>
                        <p>品质男装 秋季焕新</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <!-- 底部链接 -->
        <div class="foot-up w1200">
            <div class="foot-up-box clearfix">
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic1.jpg">
                    <span>
                        正品保障<br>
                    </span>
                    <span>
                        赠品行货&emsp;放心选购
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic2.jpg">
                    <span>
                        满86包邮<br>
                    </span>
                    <span>
                        满86元&emsp;免运费
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic3.jpg">
                    <span>
                        售后无忧<br>
                    </span>
                    <span>
                        7天无理由退货
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic4.jpg">
                    <span>
                        准时送达<br>
                    </span>
                    <span>
                        收货时间由你做主
                    </span>
                </div>
            </div>
            <!-- 链接部分 -->
            <div class="foot-up-link">
                <dl>
                    <dt>新手入门</dt>
                    <dd><a href="">购买流程</a></dd>
                    <dd><a href="">会员制度</a></dd>
                    <dd><a href="">订单查询</a></dd>
                    <dd><a href="">服务协议及隐私说明</a></dd>
                    <dd><a href="">网站地图</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="">货到付款</a></dd>
                    <dd><a href="">网上支付</a></dd>
                    <dd><a href="">礼品卡支付</a></dd>
                    <dd><a href="">其他支付</a></dd>
                </dl>
                <dl>
                    <dt>配送服务</dt>
                    <dd><a href="">配送进度查询</a></dd>
                    <dd><a href="">商品验货与签收</a></dd>
                </dl>
                <dl>
                    <dt>相关规则</dt>
                    <dd><a href="">平台规则</a></dd>
                    <dd><a href="">退换货政策</a></dd>
                    <dd><a href="">发票制度</a></dd>
                    <dd><a href="">帮助中心</a></dd>
                </dl>
                <dl>
                    <dt>App更优惠</dt>
                    <dd><img src="images/qc_code.png"></dd>
                </dl>
                <dl>
                    <dt>加微信查订单</dt>
                    <dd><img src="images/qc_code.png"></dd>
                </dl>

            </div>
        </div>
        <!-- 版权信息 -->
        <div class="foot-down">
            <div class="w1200">
                <span>
                    沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX
                    |
                </span>
                <span>
                    沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证
                </span>
                <div class="foot-down-pic">
                    举报图片
                    <img src="images/footer/foot_down_pic1.jpg">
                    <img src="images/footer/foot_down_pic2.jpg">
                    <img src="images/footer/foot_down_pic3.jpg">
                    <img src="images/footer/foot_down_pic4.jpg">
                    <img src="images/footer/foot_down_pic5.jpg">
                    <img src="images/footer/foot_down_pic6.jpg">
                </div>
            </div>
        </div>
    </footer>

    <!-- js -->
    <script src="lib/jquery.js"></script>
    <script src="js/common.js"></script>
    <script src="js/sale.js"></script>
</body>

</html>